<template>
<view class="page"> 
	<view class="body"> 
		<view class="account-wrap">
			<template v-if="type==1">
				<view class="bind-icon-bar">
					<view class="icon login-icon"><image src="@/static/images/logo.png" mode="widthFix"></image></view>				
					<view class="icon bind-icon"><image src="@/static/images/bind_icon.png" mode="widthFix"></image></view>
					<view class="icon wx-icon"><image src="@/static/images/phone.png" mode="widthFix"></image></view>
				</view>
				<view class="account-area">
					<view class="item">
						<view class="label"><image src="@/static/images/user.png" mode="widthFix"></image></view>
						<input type="text" v-model="phone" class="inp" placeholder="请输入绑定手机号" /> 
					</view>
					<view class="item"> 
						<view class="label"><image src="@/static/images/phone_code.png" mode="widthFix"></image></view>
						<input type="number" v-model="phone_code" class="inp" placeholder="请输入验证码" /> 
						<view class="get-code-btn" @click="getCode">{{count_time_text}}</view>
					</view> 
					<view class="login-btn active" @click="checkCode">立即绑定</view> 
				</view>		 
			</template>
			
			<template v-if="type==2">
				<view class="bind-icon-bar">
					<view class="icon login-icon"><image src="@/static/images/logo.png" mode="widthFix"></image></view>				
					<view class="icon bind-icon"><image src="@/static/images/bind_icon.png" mode="widthFix"></image></view>
					<view class="icon wx-icon"><image src="@/static/images/wechat.png" mode="widthFix"></image></view>
				</view>
				<view class="account-area">
					<view class="item">
						<view class="label"><image src="@/static/images/user.png" mode="widthFix"></image></view>
						<input type="text" v-model="user_name" class="inp" placeholder="请输入登录账号" /> 
					</view>
					<view class="item"> 
						<view class="label"><image src="@/static/images/pw.png" mode="widthFix"></image></view>
						<input type="password" v-model="password" class="inp" placeholder="请输入登录密码" /> 
					</view> 
					<view class="login-btn active" @click="bindPhone">立即绑定</view> 
				</view>		 
			</template>
					 
		</view>
	</view> 
</view>
</template>

<script> 
import Timer from '@/common/timer.js'
import {checkPhone,getCurrenPage} from '@/common/util.js'
import {appid} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{
			type:1,        // 1 绑定手机  2 绑定微信
			user_name:'',
			userInfo:uni.getStorageSync('userInfo'),
			uid:'',
			token:'',
			appid:appid,
			password:'', 	
			phone:"",
			phone_code:"",
			isSentCode:true,
			isCheckCode:true,
			isStop:true,
			count_time_text:'获取验证码',
			pass:''
		}
	},
	onShow() {
		
	},
	onLoad(params) {  
		
		this.type=params.type; 
		this.token=params.token;
		this.userInfo=JSON.parse(params.userinfo); 
		this.pass = params.pass
		 
		if(this.type==1){
			uni.setNavigationBarTitle({
				title:'绑定手机号'
			})
		}else if(this.type==2){
			uni.setNavigationBarTitle({
				title:'绑定微信号'
			})
		}
		 
		
	},
	methods:{
		
		// 获取验证码
		getCode:async function(){
			let _this=this;
			if(this.phone==""){
				uni.showToast({
					icon: 'none',
					title: '请输入手机号',
					mask: true,
					duration: 2000 
				})
			}else if(!checkPhone(this.phone)){
				uni.showToast({
					icon: 'none',
					title: '请输入正确手机号',
					mask: true,
					duration: 2000 
				})
			}else{
				if(this.isSentCode){
					this.isSentCode=false;				
					
					let res=await this.$api.user_api.sendSms({
						uid:this.userInfo.uid,
						appid:this.appid,
						token:this.token,
						phone:this.phone
					})
					
					if(res.data.ret==1000){
						this.timer=new Timer({
							type:'1',
							num:60
						});
						this.timer.start({
							success:function(res){ 
								_this.count_time_text=res+'s';
							},
							complate:function(){
								_this.count_time_text='获取验证码';
								_this.isSentCode=true;
							}
						})
					}else{
						uni.showToast({
							icon: 'none',
							image: '../../static/images/error.png',
							title: res.data.message,
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isSentCode=true;
								},300)	
							}
						})
					}
				}
			}
			
		},
		
		// 检测验证码
		checkCode:async function(){
			let _this=this;
			if(this.phone==""){
				uni.showToast({
					icon: 'none',
					title: '请输入手机号',
					mask: true,
					duration: 2000 
				})
			}else if(this.phone_code==''){
				uni.showToast({
					icon: 'none',
					title: '请输入短信验证码',
					mask: true,
					duration: 2000, 
				})
			}else{
				if(this.isCheckCode){
					this.isCheckCode=false;						
					let res=await this.$api.user_api.checkSms({
						uid:this.userInfo.uid,
						appid:this.appid,
						token:this.token,
						code:this.phone_code
					}) 
					if(res.data.ret==1000){ 
						this.$store.commit('updateLoginState',true);    // 登录状态更新   true 状态有更新
						this.userInfo.phone=this.phone;
						
						// 更新数据
						let update=await this.$api.user_api.updateUserInfo({
							user_id:this.userInfo.uid, 
							appid:this.appid,
							token:this.token,
							old_password:this.pass,
							new_password:this.pass,
							phone:this.phone, 
							email:'', 
							city_id:''
						})
						
						console.log(update)
						if(update.data.ret==1003){
							return uni.showToast({
								icon:'error',
								title:update.data.message,
								duration:1000,
								mask:true
							})
						}
						
						// 登录成功返回上一页 
						uni.showToast({
							icon: 'success',
							title: '手机绑定成功',
							mask: true,
							duration: 2000,
							success() {
								setTimeout(() => {
									if(_this.backtype){
										// 登录成功更新上一页登录状态
										let prevPage=getCurrenPage(2); 
										prevPage.$vm.loginStateUpdate=true;
										uni.navigateBack({
											delta:1
										})
									}else{
										uni.switchTab({
											url:'/pages/index/index'
										})
									}
									// 保存用户信息
									uni.setStorage({
										key: 'userInfo',
										data: _this.userInfo
									})
									
									uni.setStorage({
										key:'token',
										data:_this.token
									})
									_this.isCheckCode = true; 
								}, 1000)
							}
						})
						
						
						
						
					}else{
						uni.showToast({
							icon: 'none',
							image: '../../static/images/error.png',
							title: res.data.message,
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isCheckCode = true; 
								},300)	
							}
						})
					}
				}
				
			}
			
		},
		
		 
		// 绑定事件
		bindPhone:async function(){
			let _this=this;
			if(this.isStop){
				this.isStop=false;
				if (!this.user_name) {
					uni.showToast({
						icon: 'none',
						title: '请输入登录账号',
						mask: true,
						duration: 2000,
						success() {
							_this.isStop = true;
						}
					})
				} else if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请输入登录密码',
						mask: true,
						duration: 2000,
						success() {
							_this.isStop = true;
						}
					})
				} else {
					uni.showLoading({
						title: '账号绑定中...',
						mask: true
					})
					let loginRes = await _this.$api.user_api.login({
						username: _this.user_name,
						password: _this.password, 
						type: 2
					}) 
					if(loginRes.data.ret ==1004){
						
					}else{
						uni.showToast({
							icon: 'none',
							image:'../../static/images/error.png',
							title: loginRes.data.message,
							mask: true,
							duration: 2000,
							success() {
								_this.isStop = true;
							}
						})
					}
					console.log(loginRes)
				}
			}
		},
		
		bindPhone1:async function(){
			let _this=this;
			console.log(this.checkData())
			if(this.checkData()){
				if(this.isStopBind){
					this.isStopBind=false;
					console.log(123)
					let res=await this.$api.user_api.bindPhone({
						openid:this.openId,
						phone:this.phone,
						type:2,
						code:this.phoneCode,
						invite_code:this.invite_code
					})
					console.log(res)
					if(res.data.code==200){
						let token=res.data.data.token;
						uni.showToast({
							icon:"success",
							title:'手机绑定成功',
							mask:true,
							duration:1000,
							async success() { 
								setTimeout(()=>{
									_this.isStopBind=true;
									if(_this.backType=='prev'){
										let prevPage=getCurrenPage(2);
										prevPage.$vm.loginStateUpdate=true;
										uni.navigateBack({
											delta:1
										})
									}else if(_this.backType=='next'){
										if(_this.backurl){
											uni.redirectTo({
												url:_this.backurl
											})
										} 
									}else{
										uni.redirectTo({
											url:'/pages/index/index'
										})
									}
								},1000)								
								 
								let userInfo=await getUserInfo(token);
								uni.setStorage({
									key:'userInfo',
									data:userInfo
								});
								uni.setStorage({
									key:'token',
									data:token
								});
							}
						})
					}else{ 
						setTimeout(()=>{
							_this.isStopBind=true;
						},2000)
						uni.showToast({
							icon:"none",
							title:res.data.msg,
							mask:true,
							duration:2000
						})
					} 
				} 
			}
		},
		 
		
	},
	onUnload() {
		 
		
	},
	computed:{
		
	},
	components:{
		
	}
}
</script>

<style lang="less">
.page,page{background: #FFFFFF;} 
.account-wrap{
	width:90%;
	margin:0 auto;
	padding: 50rpx 0 0 0;
}

.bind-icon-bar{
	display: flex;
	justify-content: center;
	margin:40rpx 0;
	.icon{
		width:80rpx;
		height:80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0 20rpx;
	}
	.wx-icon image{
		width:100%;
	}
	.bind-icon image{
		width:70%
	}
	.login-icon image{
		width:100%
	}
}  

.account-area{
	margin:100rpx 0 150rpx;
	.item{
		display: flex;
		align-items: center;
		background: #f8f8f8;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding:15rpx 0;
		.label{
			width:80rpx;
			height:60rpx;
			text-align: center;
			line-height: 60rpx;
			color:#999;
			font-size:28rpx;
			image{
				width:50%;
				vertical-align: middle;
			}
		}
		.inp{
			flex-grow: 2;
			height:60rpx;
			line-height: 60rpx; 
			padding-left:10rpx; 
			font-size:28rpx;
		}
	}
} 

.get-code-btn{
	flex-shrink: 0;
	margin:0 20rpx;
	font-size: 30rpx;
	color:#09f;
	text-align: center;
}
 
.login-btn{
	height:80rpx;
	text-align: center;
	line-height: 80rpx;
	margin-top:50rpx;
	background: #0085FF;
	border-radius: 15rpx;
	font-size: 32rpx;
	color:#fff;
}
 
</style>
